<template>
  <div class="mapOperationData">
    <div class="siteStatus">
      <div
        class="items"
        :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/waterStatus.png') + ') no-repeat', 'background-size': '100% 100%'}"
      >
        <div class="textStatus" v-if="topStatus.WATER_QUALITY==0">
          <div
            class="logo"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/normal.png') + ') no-repeat', 'background-size': '100% 100%'}"
          ></div>
          <div class="f18" style="color: #0DC273">正常</div>
        </div>
        <div class="textStatus" v-else>
          <div
            class="logo"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/overproof.png') + ') no-repeat', 'background-size': '100% 100%'}"
          ></div>
          <div class="f18" style="color: #FF6060">超标</div>
        </div>
      </div>
      <div
        class="items"
        :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/sewageOutlet.png') + ') no-repeat', 'background-size': '100% 100%'}"

      >
        <div class="imgStatus" v-if="topStatus.SEWAGE_S==0">
          <div
            class="logo f18 text-center font_color_f"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/statusClose.png') + ') no-repeat', 'background-size': '100% 100%'}"

          >关</div>
        </div>
        <div class="imgStatus" v-else>
          <div
            class="logo f18 text-center font_color_f"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/statusOpen.png') + ') no-repeat', 'background-size': '100% 100%'}"
          >开</div>
        </div>
      </div>
      <div
        class="items"
        :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/sewageOutlet.png') + ') no-repeat', 'background-size': '100% 100%'}"

      >
        <div class="imgStatus" v-if="topStatus.RAIN_S==0">
          <div
            class="logo f18 text-center font_color_f"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/statusClose.png') + ') no-repeat', 'background-size': '100% 100%'}"
          >关</div>
        </div>
        <div class="imgStatus" v-else>
          <div
            class="logo f18 text-center font_color_f"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/statusOpen.png') + ') no-repeat', 'background-size': '100% 100%'}"
          >开
          </div>
        </div>
      </div>
      <div
        class="items"
        :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/controlPattern.png') + ') no-repeat', 'background-size': '100% 100%'}"
      >
        <div class="textStatus" v-if="topStatus.CTRL_M==0">
          <div
            class="logo"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/automation.png') + ') no-repeat', 'background-size': '100% 100%'}"
          ></div>
          <div class="f18" style="color: #46DCFF">自动</div>
        </div>
        <div class="textStatus" v-else>
          <div
            class="logo"
            :style="{ 'background': 'url(' + require('../../../../assets/images/screen/model/operation.png') + ') no-repeat', 'background-size': '100% 100%'}"
          ></div>
          <div class="f18" style="color: #0DC273">手动</div>
        </div>
      </div>
    </div>
    <div class="chat">
      <map-model-chat :map-model-chat="mapOperationData"/>
    </div>
  </div>
</template>

<script>
import MapModelChat from '@/views/home/model/components/MapModelChat'

export default {
  name: 'MapOperationData',
  props: {
    mapOperationData: {
      type: Object,
      default: null
    }
  },
  components: {
    MapModelChat
  },
  watch: {
    mapOperationData: {
      handler(val) {
        console.log('数据', val)
      }
    }
  },
  data() {
    return {
      status: false,
      topStatus: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.getOperationData()
    })
  },
  methods: {

    async getOperationData() {
      const params = {
        substationId: this.mapOperationData.substationId
      }
      let res = await this.$http.get('/screenData/getOperationData', params)
      if (res.code == '200') {
        this.topStatus = res.data
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.mapOperationData {
  width: 100%;
  height: 100%;
  margin-top: 20px;

  .siteStatus {
    display: flex;
    justify-content: flex-start;

    .items {
      width: 200px;
      height: 78px;
      position: relative;
      margin-right: 10px;

      .textStatus {
        //width: 100px;
        height: 70px;
        position: absolute;
        top: 60%;
        right: 45px;
        transform: translate(0, -50%);

        .logo {
          width: 30px;
          height: 30px;
          //background: url("../../../../assets/images/screen/model/normal.png") no-repeat;
          //background-size: 100% 100%;
          margin-bottom: 10px;
        }
      }

      .imgStatus {
        //width: 100px;
        height: 70px;
        position: absolute;
        top: 75%;
        right: 15px;
        transform: translate(0, -50%);

        .logo {
          width: 80px;
          height: 30px;
          //background: url("../../../../assets/images/screen/model/normal.png") no-repeat;
          //background-size: 100% 100%;
          padding-top: 5px;
          //margin-bottom: 10px;
        }
      }
    }
  }

  .chat {
    width: 100%;
    height: 200px;
    margin-top: 40px;
    background: #035089;
    border: 1px solid #00A0E9;
    border-radius: 10px;
  }
}
</style>
